<template>
  <div>
    <Echart
      :options="options"
      id="mapChart"
      height="500px"
      class="map_echart"
    ></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
// import "../../node_modules/echarts/map/js/china.js";
export default {
  data() {
    return {
      options: {
        color: "#501010",
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(166, 200, 76, 0.82)",
          borderColor: "#b70406",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          // formatter: function(params, ticket, callback) {
          //   //根据业务自己拓展要显示的内容
          //   var res = "";
          //   var name = params.name;
          //   var value = params.value[params.seriesIndex + 1];
          //   res =
          //     "<span style='color:#fff;'>" +
          //     name +
          //     "</span><br/>数据：" +
          //     value;
          //   return res;
          // },
        },
        backgroundColor: "#b70406", //Echarts背景

        visualMap: {
          //图例值控制
          min: 0,
          max: 1,
          calculable: true,
          show: false,
          color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: "china",
          zoom: 1.2,
          label: {
            // normal: {
            //   show: false,
            //   textStyle: {
            //     color: "#FFFFFF",
            //   },
            // },
            emphasis: {
              show: false,
            },
          },
          roam: false, //是否允许缩放
          itemStyle: {
            normal: {
              color: "#501010", //地图背景色
              borderColor: "#501010", //省市边界线00fcff 516a89
              borderWidth: 1,
              //   textStyle: "#fff",
            },
            emphasis: {
              color: "rgba(37, 43, 61, .5)", //悬浮背景
            },
          },
        },
        series: [],
      },
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Array,
      default: () => {
        [];
      },
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.$set(this.options, "series", newData);
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style scoped>
.map_echart {
  position: relative;
  top: -40px;
}
</style>
